// 类名
$about-me: name(about-me);
$carousel: name(carousel);
//.hx-minw-
@for $i from 0 through 5 {
  .#{$prefix}-minw-#{$i} {
      min-width: (5em * $i);
  }
}
//.hx-maxw-
@for $i from 0 through 5 {
  .#{$prefix}-maxw-#{$i} {
      max-width: (5em * $i);
  }
}
//.hx-minh-
@for $i from 0 through 5 {
  .#{$prefix}-minh-#{$i} {
      min-height: (5em * $i);
  }
}
//.hx-maxh-
@for $i from 0 through 5 {
  .#{$prefix}-maxh-#{$i} {
      max-height: (5em * $i);
  }
}

@each $w in 0, 25, 30, 50, 70, 75, 100 {
  .w-#{$w} {
      width: #{$w}% !important;
  }
  .h-#{$w} {
    height: #{$w}% !important;
  }
}
#{$about-me},
#{$carousel} .carousel-item {
    height: 11.875rem;
}
#{$carousel} .carousel-thumbnail {
    height: 5.875rem;
}
/*小屏*/
@media (min-width: 576px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
      .w-sm-#{$w} {
          width: #{$w}% !important;
      }
      .h-sm-#{$w} {
        height: #{$w}% !important;
      }
  }
  #{$carousel} .carousel-thumbnail,
  #{$carousel} .carousel-item {
      height: $carousel-sm-height;
  }
};
/*中屏*/

@media (min-width: 768px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100{
      .w-md-#{$w}{
          width:#{$w}% !important;
      }
      .h-md-#{$w} {
        height: #{$w}% !important;
      }
  }

  #{$about-me},
  #{$carousel} .carousel-thumbnail,
  #{$carousel} .carousel-item {
      height: $carousel-md-height;
  }

  #{$about-me} {
      width: $carousel-md-width;
  }
};
/*大屏*/
@media (min-width: 992px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
      .w-lg-#{$w} {
          width: #{$w}% !important;
      }
      .h-lg-#{$w} {
        height: #{$w}% !important;
      }
  }

    #{$about-me},
    #{$carousel} .carousel-thumbnail,
    #{$carousel} .carousel-item {
        height: $carousel-lg-height;
    }
    #{$about-me} {
        width: $carousel-lg-width;
    }
};
/*超大屏*/
@media (min-width: 1200px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
      .w-xl-#{$w} {
          width: #{$w}% !important;
      }
      .h-xl-#{$w} {
        height: #{$w}% !important;
      }
  }

  #{$about-me},
  #{$carousel} .carousel-thumbnail,
  #{$carousel} .carousel-item {
        height: $carousel-xl-height;
    }
    #{$about-me} {
        width: $carousel-xl-width;
    }
};